<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>生物特征识别中心</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta http-equiv="Content-Language" content="zh-CN"/>
    <link rel="stylesheet" href="__CSS__/bootstrap.css">
    <link rel="stylesheet" href="__CSS__/my.css">
</head>
<body>
{$nav}
<div class="container" id="container">
    <!-- ===============标题=================== -->
    <div>
        <div class="row">
            <div class="col-sm-5">
                <span class="heading"> 委托列表 </span>
            </div>
            <div class="col-sm-1">
                <button type="button" class="btn btn-lg btn-link btn-header"
                        onclick="$('#modal-screening').modal('show');"><span class="glyphicon glyphicon-retweet"
                                                                             style="font-size: 16px"></span>&nbsp;筛选
                </button>
            </div>
            <div class="col-sm-1">
                <button type="button" class="btn btn-lg btn-link btn-header" data-toggle="modal"
                        data-target="#modal-add" onclick="$('#add-failed').hide();"><span
                        class="glyphicon glyphicon-plus" style="font-size: 16px"></span>&nbsp;新增
                </button>
            </div>
            <div class="col-sm-5">
                <div class="input-group" style="margin:25px 30px 0 30px">
                    <input type="text" class="form-control" id="search-box" placeholder="请输入全部或部分委托名称">
                    <span class="input-group-btn">
                        <button class="btn btn-primary" onclick="displayData(1,'Group',{data:{'search_name':$('#search-box').val()}})"><span class="glyphicon glyphicon-search"></span>&nbsp;</button>
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modal-screening">
        <div class="modal-dialog" style="width: 500px">
            <div class="modal-content">
                <div style="padding: 20px 20px;">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">×</span></button>
                    <h4 class="modal-title">筛选选项</h4>
                </div>
                <div class="modal-body" align="center">
                    <form class="form-horizontal" id="form-screening" style="padding-right: 20px">
                        <div class="form-group">
                            <label for="screening-unit" class="col-sm-3 control-label">送检单位：</label>
                            <div class="col-sm-9">
                                <select class="form-control unit-select" id="screening-unit" name="id_unit">
                                    <option value="">不限</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="screening-date-from" class="col-sm-3 control-label">送样时间：</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="screening-date-from" name="date_from">
                            </div>
                            <label for="screening-date-to" class="col-sm-1 control-label">至</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="screening-date-to" name="date_to">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" data-dismiss="modal" ><span class="glyphicon glyphicon-remove"></span>&nbsp;取消</button>
                    <button class="btn btn-primary" data-dismiss="modal" onclick="displayData(1,'Group',{data:$('#form-screening').toJson()})"><span class="glyphicon glyphicon-ok"></span>&nbsp;提交</button>
                </div>
            </div>
        </div>
    </div>


    <table id="table-data" class="table table-hover" id="table-data">
        <thead>
        <tr>
            <th>#</th>
            <th>委托名</th>
            <th>送检单位</th>
            <th>送检人员</th>
            <th>样品数量</th>
            <th>送样日期</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="tbody">
        </tbody>
    </table>

    <!--=================添加(modal)====================-->
    <div class="modal fade" id="modal-add" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div style="margin: 20px 20px;">

                    <!-- 关闭按钮× -->
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

                    <!-- 选项卡 -->
                    <div id="nav-add">
                        <ul class="nav nav-pills">
                            <li class="active"><a href="#add-by-input" data-toggle="tab"><span
                                    class="glyphicon glyphicon-pencil"></span>&nbsp;手动输入</a></li>
                            <li><a href="#add-by-upload" data-toggle="tab"><span
                                    class="glyphicon glyphicon-open"></span>&nbsp;上传文件</a></li>
                        </ul>
                    </div>

                    <!-- 选项卡内容 -->
                    <div id="tabContent" class="tab-content" style="margin: 0 50px">
                        <div class="tab-pane fade" id="add-by-upload">

                            <!-- 上传文件表单 -->

                            <div align="right">
                                <a type="button" class="btn btn-md btn-link" href="/static/template/group_import_tpl.xlsx"><span class="glyphicon glyphicon-save"></span>&nbsp;下载模板</a>
                            </div>
                            <div style="height: 20px"></div>
                            <!-- 上传框 -->
                            <form class="form-table" id="form-upload">
                                <input onchange="$('#file').showValTo('#file-show-name')" type="file" name="file"
                                       id="file" style="display: none"/>
                            </form>
                            <div class="input-group">
                                <input type="text" class="form-control" id="file-show-name" readonly="readonly"
                                       placeholder="点击选择文件" onclick="$('#file').click();">
                                <span class="input-group-btn"><button class="btn btn-default" type="button"
                                                                      onclick="$('#file').click();">浏览</button></span>
                            </div>

                            <div style="height: 20px"></div>
                            <div id="upload-result" hidden="true"></div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <button type="button" class="btn btn-primary" id="form-upload-submit">提交</button>
                            </div>
                        </div>
                        <div class="tab-pane fade in active" id="add-by-input">

                            <!-- 手动填写表单 -->
                            <form class="form-horizontal" id="form-add">
                                <div style="height: 40px"></div>
                                <div class="form-group">
                                    <label for="group-name" class="col-sm-3 control-label">委托名</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" id="group-name" name="name"
                                               placeholder="请输入委托名称">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="unit-name" class="col-sm-3 control-label">送检单位</label>
                                    <div class="col-sm-9">
                                        <select class="form-control unit-select" name="id_unit" id="unit-name">
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="agent-name" class="col-sm-3 control-label">送检人员</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" id="agent-name" name="agent_name"
                                               placeholder="请输入送检人员姓名">
                                    </div>
                                </div>
                                <div style="height: 20px"></div>
                            </form>
                            <div id="add-result" hidden="true"></div>
                            <div class="modal-footer" id="form-add-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <button type="submit" class="btn btn-primary" id="form-add-submit">提交</button>
                            </div>
                        </div>
                    </div>


                </div>
            </div>
        </div>
    </div>
    <!--=================编辑(modal)====================-->
    <div class="modal fade" id="modal-update" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div style="margin: 20px 20px;">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <div style="margin: 0px 40px 0 20px;">
                        <div class="modal-header">
                            <h4 class="modal-title" id="myModalLabel">编辑委托</h4>
                        </div>
                        <form class="form-horizontal" id="form-update">
                            <div style="height: 40px"></div>
                            <input type="text" id="group-update-id" name="id" hidden="true">
                            <div class="form-group">
                                <label for="group-update-name" class="col-sm-3 control-label">委托名</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="group-update-name" name="name">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="group-update-unit-name" class="col-sm-3 control-label">送检单位</label>
                                <div class="col-sm-9">
                                    <select class="form-control unit-select" id="group-update-unit-name" name="id_unit">
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="group-update-agent-name" class="col-sm-3 control-label">送检人员</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="group-update-agent-name"
                                           name="agent_name">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="group-update-date" class="col-sm-3 control-label">送检日期</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="group-update-date" name="rsv_date">
                                </div>
                            </div>
                            <div id="update-result" hidden="true"></div>
                            <div style="height: 20px"></div>
                        </form>

                        <div class="modal-footer" id="form-update-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" id="form-update-submit">提交</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--================等待框================-->
    <div class="modal fade" id="modal-loading" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div align="center">
                <h4><span class="alert alert-warning">loading...</span></h4>
            </div>
        </div>
    </div>

</div>
<!--分页页码-->
<div align="center">
    <ul class="pagination" id="pager"></ul>
</div>


</body>
<script src="__JS__/jquery-3.2.1.min.js"></script>
<script src="__JS__/jquery.cookie.js"></script>
<script src="__JS__/bootstrap.min.js"></script>
<script src="__JS__/my.js"></script>
<script type="text/javascript">

    displayData(1, 'Group');

    /*========================显示现有送样单位===========================*/
    $.post("{:url('Unit/getAll')}", null, function (data) {
        var data_unit = data;
        for (var index_unit in data_unit) {
            $(".unit-select").append("<option value='" + data_unit[index_unit].id + "'>" + data_unit[index_unit].name + "</option>");
        }
    });


    /*========================添加委托===========================*/
    //手动添加
    $("#form-add-submit").click(function () {
        $.post("{:url('Group/add')}", {data:$("#form-add").toJson()}, function (data) {
            $("#add-result").showAjaxResult(data, '成功添加', '个委托');
        });
    });
    //上传文件
    $("#form-upload-submit").click(function () {
        var formData = new FormData($("#form-upload")[0]);
        $.ajax({
            type: "post",
            url: "{:url('Group/import')}",
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
                $("#upload-result").showAjaxResult(data, '成功添加', '个委托');
            }
        });
    });

    /*========================编辑委托===========================*/
    function form_update(id_group) {
        $.post("{:url('Group/getById')}", {"id": id_group}, function (data) {
            var arr_this_group = data;
            $("#group-update-id").val(id_group);
            $("#group-update-name").val(arr_this_group.name);
            $("#group-update-unit-name").val(arr_this_group.id_unit);
            $("#group-update-agent-name").val(arr_this_group.agent_name);
            $("#group-update-date").val(arr_this_group.rsv_date);
            $("#modal-update").modal('show');
        });
    }

    $("#form-update-submit").click(function () {
        $.post("{:url('Group/edit')}", {data:$("#form-update").toJson()}, function (data) {
            $("#update-result").showAjaxResult(data, '成功更新', '个委托');
        });
    });


</script>
</html>
